<template>
    <view class="content">
        <view class="box">
            <view class="item">
                <view>姓名</view>
                <view class="item-r">
                    <input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="p-inp" class="inp" :disabled="disabled">
                </view>
            </view>
            <view class="item">
                <view>手机号</view>
                <view class="item-r">
                    <input type="number" v-model="tel" placeholder="请输入手机号" placeholder-class="p-inp" class="inp" :disabled="disabled">
                </view>
            </view>
            <view class="item">
                <view>密码</view>
                <view class="item-r">
                    <input type="text" v-model="password" placeholder="请输入密码" placeholder-class="p-inp" class="inp" :disabled="disabled">
                </view>
            </view>
            <view class="item">
                <view>机构邀请码</view>
                <view class="item-r">
                    <input type="text" v-model="code" placeholder="请输入机构邀请码" placeholder-class="p-inp" class="inp" :disabled="disabled"
                        @blur="blur">
                </view>
            </view>
            <view class="item">
                <view>选择门店</view>
                <view class="item-r">
                    <input type="text" v-model="store" placeholder="请选择门店" placeholder-class="p-inp" class="inp" disabled
                        @click="focus">
                    <image src="/static/icon/arrow_d_01.png" class="arrow-d-01"></image>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view>身份证号码</view>
                <view class="item-r">
                    <input type="idcard" v-model="idcard" placeholder="请输入身份证号码" placeholder-class="p-inp" class="inp" :disabled="disabled">
                </view>
            </view>
            <view class="u-p-t-30 u-p-b-5">
                <view>身份证照片上传</view>
                <view class="sub">请上传身份证（人像面）</view>
                <image :src="fimg" class="idcard-img" v-if="fimg" @click="chooseImg(1)"></image>
                <image src="/static/image/up_photo.png" class="up-photo" v-else @click="chooseImg(1)"></image>
                
                <view class="sub">请上传身份证（国徽面）</view>
                <image :src="bimg" class="idcard-img" v-if="bimg" @click="chooseImg(2)"></image>
                <image src="/static/image/up_photo.png" class="up-photo" v-else @click="chooseImg(2)"></image>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view>待结佣</view>
                <view class="item-r">
                    <input type="digit" v-model="money" placeholder="请输入待结佣金金额" placeholder-class="p-inp" class="inp" v-if="!id">
                    <input type="digit" v-model="money" placeholder="请输入待结佣金金额" placeholder-class="p-inp" class="inp" disabled v-else>
                    <text class="u-p-l-10">元</text>
                </view>
            </view>
            <view class="item">
                <view>职位</view>
                <view class="item-r">
                    <input type="text" v-model="job" placeholder="请选择职位" placeholder-class="p-inp" class="inp" disabled v-if="!id" @click="show = true">
                    <input type="text" v-model="job" placeholder="请选择职位" placeholder-class="p-inp" class="inp" disabled v-else>
                </view>
            </view>
            <view class="item">
                <view>底薪</view>
                <view class="item-r">
                    <input type="digit" v-model="base" placeholder="请输入底薪" placeholder-class="p-inp" class="inp" :disabled="disabled">
                    <text class="u-p-l-10">元</text>
                </view>
            </view>
            <view class="item">
                <view>禁用</view>
                <view class="u-flex u-row-right inp">
                    <u-switch v-model="checked" size="40" active-color="#00a0e9" @change="change"></u-switch>
                </view>
            </view>
        </view>
        <!-- user_status 1启用 2禁用 work_status 1在职 2离职 3申请离职 -->
        <!-- user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划 -->
        <!-- 添加 -->
        <view class="tj-btn" v-if="!id" @click="$noMultipleClicks(doSubmit)">提交</view>
        <!-- 详情 -->
        <view class="btns" v-if="id && disabled && data.work_status == 3">
            <view class="lz-btn" @click="toExamine(1)">驳回</view>
            <view class="btn" @click="toExamine(2)">通过</view>
        </view>
        
        <view class="btns" v-if="id && disabled && data.work_status != 3">
            <view class="btn" @click="disabled = false">编辑</view>
            <view class="btn" @click="del">删除</view>
            <view class="lz-btn" @click="depart">离职</view>
        </view>
        <view class="tj-btn" v-if="id && !disabled && data.work_status != 3" @click="$noMultipleClicks(doSubmit)">确认编辑</view>
        
        <!-- 职位 -->
        <u-select v-model="show" mode="single-column" :list="pList" value-name="id" label-name="name" @confirm="confirm"></u-select>
        
        <u-popup mode="bottom" v-model="storeShow">
            <view class="popup">
                <u-search placeholder="请输入门店名称" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
                <scroll-view scroll-y="true" style="height: 500rpx;">
                    <view>
                        <view class="popup-item" v-for="(item, index) in list" :key="index"
                            :class="{active : item.isSelect}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <view class="pop-btn" @click="confirmStore">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { API_URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                noClick:true,//连点
                show: false,
                pList: [],
                storeShow: false,
                keyword: '',
                list: [],
                URL: API_URL, //上传图片用的
                name: '',//姓名
                tel: '',//手机号
                password: '',//密码
                code: '',//机构邀请码
                store: '',//门店
                storeId: '',//
                idcard: '',//身份证号
                fimg: '',//人像面
                fimgId: '',//
                bimg: '',//国徽面
                bimgId: '',//
                money: '',//待结佣
                job: '',//职位
                jobId: '',
                base: '',//底薪
                disabled: false,//是否可编辑
                checked: false, //是否禁用
                id: '',
                data: {},
            };
        },
        onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.disabled = true
                this.getData()
                uni.setNavigationBarTitle({
                	title:'详情'
                })
            }
            this.getPosition()
        },
        methods: {
            // 通过、驳回
            toExamine(num) {
                this.$ajax('user_depart_examine', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,//人员id
                    status: num,//2通过 1驳回
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.$toast('提交成功');
                        setTimeout(() => {
                            this.backT()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 选择门店
            choose(item) {
                item.isSelect = !item.isSelect
            },
            confirmStore() {
                var a = [], b = []
                if (this.list && this.list.length > 0) {
                    this.list.forEach(cur => {
                        if (cur.isSelect) {
                            a.push(cur.name)
                            b.push(cur.id)
                        }
                    })
                }
                this.store = a.join(',')
                this.storeId = b.join(',')
                this.storeShow = false
            },
            
            // 搜索门店
            doSearch() {
                this.getStore()
            },
            
            focus() {
                if (this.code) {
                    this.getStore()
                } else {
                    this.$toast('请先输入机构邀请码！');
                }
            },
            // 输入邀请码后 展示门店
            blur() {
                if (this.code) {
                    this.getStore()
                }
            },
            // 获取门店列表
            getStore() {
                this.$ajax('stores', {
                    code: this.code,//机构邀请码
                    name: this.keyword,//搜索
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.list = ret.detail
                        if (this.list && this.list.length > 0) {
                            this.list.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                        this.storeShow = true
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 选择职位
            confirm(e) {
                console.log(e)
                this.job = e[0].label
                this.jobId = e[0].value
            },
            // 删除
            del() {
                uni.showModal({
                	title: '提示',
                	content: '确定删除吗？',
                	confirmColor:'#033685',
                	success: (res) => {
                        if (res.confirm) {
                            this.$ajax('user_delete', {
                            	user_token: this.$getSync('userToken'),
                            	id: this.id,
                            }).then(ret => {
                            	if (ret.success == 1000) {
                            		this.$toast('删除成功');
                                    setTimeout(() => {
                                        this.$backT()
                                    }, 500)
                            	} else {
                            		this.$toast(ret.msg);
                            	}
                            });
                        } else if (res.cancel) {
                            
                        }
                	}
                });
            },
            // 离职
            depart() {
                uni.showModal({
                	title: '提示',
                	content: '确定离职吗？',
                	confirmColor:'#033685',
                	success: (res) => {
                        if (res.confirm) {
                            this.$ajax('user_depart', {
                            	user_token: this.$getSync('userToken'),
                            	id: this.id,
                            }).then(ret => {
                            	if (ret.success == 1000) {
                            		this.$toast('提交成功');
                                    setTimeout(() => {
                                        this.$backT()
                                    }, 500)
                            	} else {
                            		this.$toast(ret.msg);
                            	}
                            });
                        } else if (res.cancel) {
                            
                        }
                	}
                });
            },
            // 切换禁用
            change(status) {
            	console.log(status);
                this.checked = status;
            },
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入姓名！');
                    return false;
                }
                if (!this.tel) {
                    this.$toast('请输入手机号！');
                    return false;
                }
                if (!this.$checkPhone(this.tel)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!this.password) {
                    this.$toast('请输入密码！');
                    return false;
                }
                if (!this.code) {
                    this.$toast('请输入机构邀请码！');
                    return false;
                }
                if (!this.storeId) {
                    this.$toast('请选择门店！');
                    return false;
                }
                if (!this.idcard) {
                    this.$toast('请输入身份证号！');
                    return false;
                }
                if (!this.$testIdCard(this.idcard)) {
                    this.$toast('身份证号码格式不正确');
                    return false;
                }
                if (!this.fimgId) {
                    this.$toast('请上传身份证（人像面）！');
                    return false;
                }
                if (!this.bimgId) {
                    this.$toast('请上传身份证（国徽面）！');
                    return false;
                }
                // if (this.money == '') {
                //     this.$toast('请输入待结佣！');
                //     return false;
                // }
                if (!this.jobId) {
                    this.$toast('请选择职位！');
                    return false;
                }
                // if (this.base == '') {
                //     this.$toast('请输入底薪！');
                //     return false;
                // }
                
                this.$ajax('users_submit', {
                    user_token: this.$getSync('userToken'),
                    user_name: this.name,//姓名
                    phone: this.tel,//手机号
                    password: this.password,//密码
                    code: this.code,//邀请码
                    stores_id: this.storeId,//门店id
                    id_number: this.idcard,//身份证
                    front_img_id: this.fimgId,//身份证正面图id
                    back_img_id: this.bimgId,//身份证反面图id
                    image_id: '',//头像id
                    id: this.id,//编辑 人员id
                    user_type: this.jobId,//编辑 职位id
                    base_pay: this.base,//编辑 底薪
                    user_status: this.checked ? 2 : 1,//编辑 1正常 2禁用
                    pending_money: this.money,//编辑 佣金
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            getData() {
            	this.$ajax('users_detail', {
                    user_token: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail
                        this.name = ret.detail.user_name
                        this.tel = ret.detail.phone
                        this.password = ret.detail.password
                        this.code = ret.detail.code
                        this.store = ret.detail.stores
                        this.storeId = ret.detail.stores_id
                        this.idcard = ret.detail.id_number
                        this.fimg = ret.detail.front_img
                        this.fimgId = ret.detail.front_img_id
                        this.bimg = ret.detail.back_img
                        this.bimgId = ret.detail.back_img_id
                        this.money = ret.detail.pending_money
                        this.job = ret.detail.position
                        this.jobId = ret.detail.user_type
                        this.base = ret.detail.base_pay
                        // user_status 1启用 2禁用。 work_status 1在职 2离职 3申请离职
                        this.checked = ret.detail.user_status == 1 ? false : true
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            // 获取职位
            getPosition() {
            	this.$ajax('user_position', {
                    user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.pList = ret.detail.data
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            chooseImg(num) {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        uni.uploadFile({
                            url: this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
                            filePath: res.tempFilePaths[0],
                            name: 'image',
                            formData:{module: 'api'},
                            success: result => {
                                console.log(result)
                                let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                                if (num == 1) {
                                    this.fimg = data.image
                                    this.fimgId = data.image_id
                                } else {
                                    this.bimg = data.image
                                    this.bimgId = data.image_id
                                }
                            }
                        });
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #00a1e9;
    }
    .pop-btn{
        color: #fff;
        background-color: #00a1e9;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 20rpx;
        margin-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10rpx;
    }
    .inp{
        flex: 1;
        height: 100rpx;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .p-inp{
        color: #acacac;
    }
    .arrow-d-01{
        width: 13rpx;
        height: 8rpx;
        margin-left: 10rpx;
    }
    
    .sub{
        font-size: 24rpx;
        color: #acacac;
    }
    .up-photo{
        width: 168rpx;
        height: 168rpx;
        margin: 20rpx 0 30rpx;
    }
    .idcard-img{
        width: 285rpx;
        height: 168rpx;
        margin: 20rpx 0 30rpx;
    }
    
    .tj-btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a0e9;
        border-radius: 50rpx;
        margin: 40rpx 0;
    }
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 0;
    }
    .btns>view{
        width: calc(680rpx / 3);
        font-size: 30rpx;
        text-align: center;
        color: #fff;
        border-radius: 10rpx;
        padding: 25rpx;
    }
    .btn{
        background-color: #00a0e9;
    }
    .lz-btn{
        background-color: #bcbcbc;
    }
    
</style>
